<template>
  <div class="wel-index">
    <el-row>
      <el-col :span="24">
        <third-register></third-register>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <basic-container>
          <p style="font-size: 18px; cursor: pointer"><i class="el-icon-star-on" style="font-size: 20px" /> {{ title }}</p>
          <el-divider content-position="right"></el-divider>
          <ul class="menu-list">
            <li v-for="(item, index) in menuArrays" @click="openTag(item)" :key="index">
              <div>
                <i :class="item.icon || 'el-icon-shopping-bag-1'" style="font-size: 20px" /> <br />
                <p>{{ item.label }}</p>
              </div>
            </li>
          </ul>
        </basic-container>
      </el-col>
    </el-row>
    <footer class>{{ copyright }}</footer>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { flatMenuList } from '@/util/route';
let list = [
  {
    img: 'https://avuejs.com/images/logo-bg.jpg',
    title: '史蒂夫·乔布斯 关注了你',
    subtitle: '05-08 15:08',
    tag: '已经开始',
    status: 0
  },
  {
    img: 'https://avuejs.com/images/logo-bg.jpg',
    title: '斯蒂夫·沃兹尼亚克 关注了你',
    subtitle: '05-08 15:08',
    tag: '未开始',
    status: 1
  },
  {
    img: 'https://avuejs.com/images/logo-bg.jpg',
    title: '乔纳森·伊夫 关注了你',
    subtitle: '05-08 15:08',
    tag: '有警告',
    status: 2
  },
  {
    img: 'https://avuejs.com/images/logo-bg.jpg',
    title: '蒂姆·库克 关注了你',
    subtitle: '05-08 15:08',
    status: 3,
    tag: '有错误'
  },
  {
    img: 'https://avuejs.com/images/logo-bg.jpg',
    title: '比尔·费尔南德斯 关注了你',
    subtitle: '05-08 15:08',
    status: 4,
    tag: '已完成'
  }
];
export default {
  name: 'wel',
  data() {
    return {
      activeNames: ['1', '2', '3', '5'],
      logActiveNames: ['25'],
      // menuList: [

      // ],
      option: {
        props: {
          img: 'img',
          title: 'title',
          subtitle: 'subtitle',
          tag: 'tag'
          // status: 'status'
        }
      },
      data: list,
      noticeList: [
        {
          title: '通知公告1',
          content: '这是一段很长的很长很长很长的描述这是一段很长的很长很长很长的描述,这是一段很长的很长很长很长的描述这是一段很长的很长很长很长的描述',
          time: '2022-6-10 10:03:01'
        },
        {
          title: '通知公告2',
          content: '这是一段很长的很长很长很长的描述这是一段很长的很长很长很长的描述',
          time: '2022-6-10 10:03:01'
        },
        {
          title: '通知公告3',
          content: '这是一段很长的很长很长很长的描述这是一段很长的很长很长很长的描述',
          time: '2022-6-10 10:03:01'
        }
      ],
      title: '最近使用'
    };
  },
  computed: {
    ...mapGetters(['userInfo', 'tagList', 'cacheTagList', 'menuAll']),
    copyright() {
      return `copyright@${this.$moment(new Date()).format('YYYY')} 深圳赛瀚德技术有限公司`;
    },
    menuList() {
      this.title = '最近使用';
      if (this.cacheTagList && this.cacheTagList.length <= 10) {
        this.title = '最近使用';
        return this.cacheTagList;
      } else {
        return this.cacheTagList.slice(-10);
      }
    },
    menuArrays() {
      let menuArray = flatMenuList(this.menuAll);
      this.menuList.map((item) => {
        menuArray.map((mItem) => {
          if (item.value == mItem.path) {
            item.icon = mItem.icon;
          }
        });
      });
      return this.menuList;
    }
  },
  mounted() {},
  methods: {
    handleChange(val) {
      window.console.log(val);
    },
    pageChange(page, done) {
      setTimeout(() => {
        this.$message.success('页码' + page);
        this.data = this.data.concat(list);
        done();
      }, 1000);
    },
    openTag(item) {
      let tag;
      if (item.name) {
        tag = this.findTag(item.name).tag;
      } else {
        tag = item;
      }
      this.$router.push({
        path: this.$router.$avueRouter.getPath(
          {
            name: tag.label,
            src: tag.value
          },
          tag.meta
        ),
        query: tag.query
      });
    },
    findTag(value) {
      let tag, key;
      this.menuList.map((item, index) => {
        if (item.value === value) {
          tag = item;
          key = index;
        }
      });
      return { tag: tag, key: key };
    }
  }
};
</script>

<style lang="scss">
.el-font-size {
  font-size: 14px;
}
.wel-index {
  .menu-list {
    display: flex;
    width: 100%;
    flex-wrap: wrap;

    > li {
      width: 140px;
      height: 120px;
      background: #f1f1f1;
      margin-right: 20px;
      margin-top: 10px;
      border-radius: 8px;
      text-align: center;
      vertical-align: middle;
      list-style-type: none;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
  .notice {
    header {
      cursor: pointer;
      > span:nth-child(2) {
        color: #5f5fd9;
        float: right;
      }
    }
    .main {
      height: 400px;
      // overflow: hidden;
      .content {
        > div {
          position: relative;
          h6 {
            font-weight: bold;
            font-size: 14px;
          }
          > span {
            position: absolute;
            right: 5px;
            top: 0;
            color: #888;
            font-size: 13px;
          }
        }
      }
    }
  }
  footer {
    width: 100%;
    text-align: center;
    color: #888;
    font-size: 12px;
    position: fixed;
    bottom: 15px;

    margin: auto;
  }
}
</style>
